// TODO: API
// 作用: 使用JS去操作 html 和 浏览器
// 分类: DOM (文档对象模型)  BOM (浏览器对象模型)
// DOM: HTML与XML文档的编程接口,定义了访问和操作文档的标准方法
// DOM树:将HTML文档以树状的结构直观的表现出来
// 作用:DOM树直观的体现了标签与标签之间的关系
// DOM对象: 浏览器根据html标签生成的JS对象
// a.所有的标签属性都可以在DOM对象上找到
// b.修改DOM对象的属性会自动映射到标签上
// DOM的核心思想: 把网页内容当作 "对象" 来处理
// document对象:
// a. 是DOM里提供的一个对象
// b. 所以它提供的属性和方法都是用来访问和操作页面内容的
// 网页所以内容都在document里面


// TODO: 获取DOM对象 (css选择器)
// 根据css选择器来获取DOM对象
// 语法: document.querySelector("css选择器");
// 返回值: HTMLElement对象
// 注意: 此种方法,会选择匹配的第一个元素
// 如:
let element = document.querySelector(".pwd");
// 选择匹配多个元素
// 语法: document.querySelectorAll("css选择器");
// 返回值: NodeList对象集合
// 注意: NodeList是一个伪数组
//  a. 有长度有索引
//  b. 但是没有push(),pop()等数组方法


// TODO: 获取DOM对象 (其他方式)
// 语法: document.getElementById("id");
// 根据Id获取DOM对象
// 返回值: DOM对象
// 语法: document.getElementsByTagName("标签");
// 根据HTML标签获取DOM对象
// 返回值: NodeList
// 语法: document.getElementsByClassName("类名");
// 根据类名获取DOM对象
// 返回值: NodeList
// 观察上面的方法发现: Element获取的是一个DOM对象, Elements获取的是一个NodeList集合(DOM对象)


// TODO：获取body对象
// 在document上有一个属性body可以直接获取body对象
// 如：
let body = document.body;

// TODO：获取html对象
// 如：
let html = document.documentElement;


// TODO: 操作元素内容
// 注意: 操作元素,实际上就是操作DOM对象
// 语法: DOM对象.innerText属性
// 作用: 修改文字内容,显示存文本,不解析标签
// 语法: DOM对象.innerHTML属性
// 作用: 修改文字内容,解析HTML标签
// 如:
const box = document.querySelector('.box');
// 文字内有标签,标签不会被当作文字处理,而是会被解析
box.innerHTML = "<strong>我是一个盒子</strong>";


// TODO:操作元素样式属性
// 链接:https://www.bilibili.com/video/BV1Y84y1L7Nn?p=84&vd_source=c56ed2f67ce751cb9fe7981487f1d5f1


// TODO: 通过类名修改样式
// 链接:https://www.bilibili.com/video/BV1Y84y1L7Nn?p=85&vd_source=c56ed2f67ce751cb9fe7981487f1d5f1


// TODO: 通过classList修改样式
// 链接:https://www.bilibili.com/video/BV1Y84y1L7Nn?p=86&vd_source=c56ed2f67ce751cb9fe7981487f1d5f1



// TODO：事件冒泡、事件捕获、事件委托
// 文章：https://juejin.cn/post/7192584563799883832
// TODO: 事件冒泡和事件默认行为
// 文章：https://www.jianshu.com/p/cf88c5efd635
// TODO：阻断冒泡事件
// 文章：https://blog.csdn.net/qq_44731369/article/details/107235954
// 文章：https://blog.csdn.net/xxxxxxxxYZ/article/details/97791236#:~:text=%E8%BF%99%E6%98%AF%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%86%92%E6%B3%A1%E6%96%B9%E6%B3%95%EF%BC%8C%E4%B8%8D%E8%AE%A9%E4%BA%8B%E4%BB%B6%E5%90%91%E4%B8%8A%E8%94%93%E5%BB%B6%EF%BC%8C%E4%BD%86%E6%98%AF%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%E4%BB%BB%E7%84%B6%E4%BC%9A%E6%89%A7%E8%A1%8C%EF%BC%8C%E5%BD%93%E8%B0%83%E7%94%A8%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%E6%97%B6%EF%BC%8C%E5%81%87%E5%A6%82%E5%8E%BB%E7%82%B9%E5%87%BB%E4%B8%80%E4%B8%AA%E8%BF%9E%E6%8E%A5%EF%BC%8C%E8%BF%99%E4%B8%AA%E9%93%BE%E6%8E%A5%E4%BB%8D%E7%84%B6%E4%BC%9A%E8%A2%AB%E6%89%93%E5%BC%80%EF%BC%8C%20return%20false%20%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%E4%BC%9A%E5%90%8C%E4%BA%8B%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B9%9F%E4%BC%9A%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%EF%BC%9Breturn,false%20%EF%BC%8C%E8%BF%9E%E6%8E%A5%E4%B8%8D%E4%BC%9A%E8%A2%AB%E6%89%93%E5%BC%80%EF%BC%8C%E4%BA%8B%E4%BB%B6%E4%B9%9F%E4%B8%8D%E4%BC%9A%E4%BC%A0%E9%80%92%E5%88%B0%E4%B8%8A%E4%B8%80%E5%B1%82%E7%9A%84%E7%88%B6%E5%85%83%E7%B4%A0%20%E7%94%A8return%20false%E5%B0%B1%E7%AD%89%E4%BA%8E%E5%90%8C%E6%97%B6%E8%B0%83%E7%94%A8%E4%BA%86event.stopPropagation%E5%8F%8Aevent.preventDefault


// TODO：BOM
// BOM：浏览器对象模型
// 可以使用通过JS来操作浏览器（DOM：可以通过JS操作网页）
// 在BOM中，为我们提供了”一组对象“，用来完成对浏览器的操作

// TODO：BOM提供的常用对象
// a. window：代表整个浏览器窗口，同时也是window也是网页中的全局对象
//    注意：在全局作用域中创建的变量都会作为window对象的属性进行保存
//          在全局作用域中创建的函数都会作为window对象的方法进行保存
// b. Navigator
//      代表当前浏览器的信息，可以通过该对象来识别不同的浏览器
// c. Location
//      代表当前浏览器的地址栏信息，可以通过该对象可以获取地址栏信息
//      或者操作浏览器跳转页面
// d. History
//      代表浏览器的历史纪录，可以通过该对象操作浏览器的历史纪录
// e. Screen
//      代表用户屏幕信息，可以通过该对象可以获取到屏幕（显示器）的相关信息

// 注意：这些对象（window除外），全都是作为window对象是属性进行保存的
// 即：全局对象，可以使用window.对象名调用，也可以直接使用对象名使用（全局对象）
